<template>
    <div class="chart-box" id="chartColumn" style="width:100%; height:340px" ref="chartColumn"></div>
</template>
<script>
    import echarts from 'echarts'
    import {getChars} from '../../../api/api'
    export default {
        data() {
            return {
                chartColumn: null
            }
        },

        methods: {
            getCharData() {//获取列表数据
                //var _this = this;
                var charX=[];
                var charData=[];
                getChars().then((res) => {
                    console.log("图表数据-柱状图")
                    res.data.result.forEach(function(e){  
                        charX.push(e.channel)
                        charData.push(e.count)
                    })
                    this.drawColumnChart(charX,charData)
                });
            },
            drawColumnChart(charX,charData) {
                setTimeout(function(){
                    this.chartColumn = echarts.init(document.getElementById('chartColumn'));
                    //this.chartColumn = echarts.init(this.$refs.chartColumn);\
                    this.chartColumn.setOption({
                    tooltip: {},
                    xAxis: {
                        data: charX
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: charData
                        }]
                    });
                },2000)
            }
        },
        mounted: function () {
            this.getCharData()     
        },
        updated: function () {
            //this.drawCharts()
        }
    }
</script>

<style lang="scss" scope>
.chart-container {
    width: 100%;
   
    .chart-box{
        width:100%;
    }
}
 
    
</style>
